<template>
  <div class="order">
    <h3>订单管理</h3>
    <div class="toolbar">
      <el-form inline @submit.native.prevent size="small">
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.order_no"
            placeholder="订单号"
            style="width: 220px;"
            clearable
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchForm.type" style="width: 100px;">
            <el-option value="course" label="购买课程" />
            <el-option value="vip" label="购买会员卡" />
            <el-option value="balance" label="充值余额" />
            <el-option value="all" label="全部" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" style="width: 100px;">
            <el-option
              v-for="option in statusOptions"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input placeholder="商品关键词" />
        </el-form-item>-->
        <el-button icon="el-icon-search" size="small" type="primary" @click="onSearch">搜索</el-button>
      </el-form>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager" :loading="loading">
      <template slot="user" slot-scope="{ row }">
        <el-tooltip>
          <div slot="content">
            <p>昵称：{{ row.user.nickname }}</p>
            <p>账号：{{ row.user.username }}</p>
            <p>手机号：{{ row.user.phone_number }}</p>
            <p>性别：{{ row.user.sex | sex }}</p>
          </div>
          <span>{{ row.user.nickname }}</span>
        </el-tooltip>
      </template>
      <template slot="type" slot-scope="{ row }">
        <el-tag v-if="row.type === 'course'" type="success" size="mini">课程</el-tag>
        <el-tag v-else-if="row.type === 'vip'" type="info" size="mini">会员卡</el-tag>
      </template>
      <template slot="pay_method" slot-scope="{ row }">
        <el-tag v-if="row.pay_method === 'wxpay'" type="success">微信</el-tag>
        <el-tag v-else-if="row.pay_method === 'alipay'" type="primary">支付宝</el-tag>
        <el-tag v-else-if="row.pay_method === 'balance'" type="primary">余额支付</el-tag>
        <el-tag v-else-if="row.pay_method === 'card'" type="primary">卡密支付</el-tag>
      </template>
      <template slot="status" slot-scope="{ row }">{{ row.status | order_status }}</template>
    </xu-table>
    <xu-order-detail v-if="showOrderDialog" v-model="showOrderDialog" :id="id" />
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { OrderActionsEnum } from '../../../_/vue/store/order'
import table from '../../../mixins/table'
import xuOrderDetail from '../../../components/xu-order-detail'
export default {
  components: { xuOrderDetail },
  mixins: [table],
  data () {
    return {
      id: '',
      showOrderDialog: false,
      searchForm: {
        order_no: '',
        type: 'all',
        status: 'all'
      },
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '待付款', value: '0' },
        { label: '待发货', value: '1' },
        { label: '待收货', value: '2' },
        { label: '已取消', value: '3' },
        { label: '已完成', value: '4' }
      ],
      tableOptions: [
        { attrs: { label: '订单号', prop: 'order_no', fixed: 'left' } },
        { attrs: { label: '用户', prop: 'user', width: '120px' } },
        { attrs: { label: '订单类型', prop: 'type', width: '120px', align: 'center' } },
        { attrs: { label: '订单价格', prop: 'total_fee', align: 'center', width: '120px' } },
        { attrs: { label: '实际支付', prop: 'pay_fee', align: 'center', width: '120px' } },
        { attrs: { label: '支付方式', prop: 'pay_method', align: 'center', width: '120px' } },
        { attrs: { label: '下单时间', prop: 'create_time', align: 'center', width: '160px' } },
        { attrs: { label: '支付时间', prop: 'pay_time', align: 'center', width: '160px' } },
        { attrs: { label: '状态', prop: 'status', align: 'center', width: '120px' } },
        {
          attrs: { label: '操作', prop: 'opt', align: 'center', width: '80px', fixed: 'right' },
          buttons: [{ label: '详情', icon: 'el-icon-info', click: this.showInfo }]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: OrderActionsEnum.LIST
    }),
    showInfo ({ row }) {
      this.id = row.id
      this.showOrderDialog = true
    }
  }
}
</script>
